<!-- CourseCenter_CourseList.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>选课课程列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.mui-table-view{
				margin-left: 0;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				padding: 10px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .course-img{
				display:block;
				width: 136px;
				max-width: 136px;
				height: 84px;
				background-image: url(../../image/course_placehoder.png);
				background-size: 136px 84px;
			}
			.mui-table-view-cell .top-content{
				height: 40px;
			}
			.mui-table-view-cell .bottom-content{
				/*padding-top: 16px;*/
				height: 44px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .course_title{
				overflow: hidden;
			 	text-overflow: ellipsis;
			 	white-space: pre-wrap;
			 	display: -webkit-box;
			 	-webkit-line-clamp: 2;
			 	-webkit-box-orient: vertical;
			 	font-size: 14px;
			 	color: #222;
			 	line-height: 20px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .subtitle{
				color: #999;
				font-size: 12px;
				overflow: hidden;
				white-space: normal;
			 	text-overflow: ellipsis;
			 	line-height: 14px;
			}
			/*.subtitle .right-span{
				margin-left: 10px;
			}*/
			.subtitle-red{
				color: #e10d20;
				font-size: 12px;
				margin: 0;
			}
			.cell-btn{
				font-size: 12px;
			    font-weight: 400;
			    line-height: 1.2;
			    padding: 4px 6px;
			    border-color: #1da4e8;
			    background-color: #1da4e8;
			    color: white;
			    width: 70px;
			}	
			.cell-btn:enabled:active{
				background-color: #2db4f8;
			}
			.bottom-content .cell-content-left{
				padding-right: 68px;
				float: left;
			}
			.bottom-content .cell-content-right{
				padding-top: 10px;
				width: 68px;
				height: 42px;
				float: right;
				position: absolute;
				right: 10px; 
				top: 50px;
			}
			.button-super-div{
				padding: 2px 0;
			}
			.course-status-tag{
				position: absolute;
				bottom: 10px;
				left: 10px;
				font-size: 12px;
				color: white;
				padding: 2px 4px;
				line-height: 1em;
				width: 136px;
				background-color: rgba(0,0,0,0.5);
				text-align: center;
			}
			.course-status-tag-red{
				background-color: #EC1A2B;
			}
			.course-status-tag-green{
				background-color: #1DBF53;
			}
			.tag-img{
				width: 12px;
				height: 12px;
				margin-right: 4px;
			}
			.cell-btn{
				margin-right: 10px;
			}
			.info-span{
				margin-left: 10px;
			}
			.mui-table-view .mui-media-object.mui-pull-left{
				margin-right: 12px;
			}
			.top-p{
				margin-top: 10px;
			}
			.bottom-p{
				margin-top: 6px;
			}
			.mui-table-view-cell{
				padding: 10px;
			}
			.mui-table-view-cell.mui-checkbox.mui-left, .mui-table-view-cell.mui-radio.mui-left{
				padding-left: 46px;
			}
			.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
			    position: absolute;
			    top: 28px;
			    left: -10px;
			}
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
				color: #18b4ed;
			}
			.add-btn{
				color: white;
				background-color: #ff9900;
				border-color: #ff9900;
				margin-top: 10px;
			}
			.add-btn:enabled:active{
				background-color: #ff9900;
				border-color: #ff9900;
			}
			.base_icon{
				width: 20px;
				margin-top: 12px;
			}
			.bottom-div{
				height: 40px;
				width: 100%;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			.bottom-checkbox input[type=checkbox]:before{
			    position: absolute;
			    top: 0;
			    left: -10px;
			}
			.bottom-left-div{
				margin-right: 100px;
				line-height: 24px;
				font-size: 14px;
				color: #222;
			}
			.bottom-right-div{
				width: 100px;
				float: right;
				font-size: 16px;
				background-color: #ff9900;
				text-align: center;
				line-height: 40px;
				color: white;
			}
			.base_navigation_bar,#BarAppearance {
				z-index: 1;
			}
			.mui-table-view-cell.mui-checkbox.hide-checkbox{
				padding-left: 10px;
			}
			.hide-checkbox input[type=checkbox]:before{
				display: none;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				margin: -10px;
			}
			.blank-div{
				width: 100%;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<ul id="tesacherTableView" class="mui-table-view">
			<!-- <li class="mui-table-view-cell mui-checkbox mui-media mui-left course-cell hide-checkbox">
				<input name="checkbox" type="checkbox" class="course-checkbox">
				<a href="javascript:;">
					<p class="course-status-tag">已结束</p> 
					<img class="mui-media-object mui-pull-left course-img" src="../../image/list-default.png"/>
					<div class="mui-media-body top-content">
						<p class="course_title">课程名称</p>
					</div>
					<div class="mui-media-body bottom-content">
						<div class="top-p">
							<p class="mui-ellipsis subtitle">
								<span class="left-span">
									任达华
								</span>
							</p>
						</div>
						<div class="bottom-p">
							<p class="mui-ellipsis subtitle">
								<span class="left-span"><img class="tag-img" src="../../image/icon_course_look.png">100人</span>
								<span class="info-span"><img class="tag-img" src="../../image/icon_course_comment.png">10条</span>
							</p>
						</div>
					</div>
				</a>
			</li> -->
		</ul>
		<div class="noSign" hidden="hidden" id="noData">
			<img src="../../image/icon_no_data.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				选修课程空空如也
				<br>
				赶紧去添加课程吧~
			</p>
			<button type="button" class="mui-btn add-btn" onclick="onSelectCourseClick()">
				＋添加课程
			</button>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="refreshData()">
				重新加载
			</button>
		</div>
		<div class="blank-div" hidden="hidden">
		</div>
		<div class="bottom-div" hidden="hidden">
			<div class="bottom-right-div" onclick="removeCourseClick()">
				删除
			</div>
			<div class="bottom-left-div">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-checkbox mui-media mui-left bottom-checkbox">
						<input id="all_select_input" type="checkbox" onclick="allSelect()">
						全选
					</li>
				</ul>
			</div>
		</div>
		<div id="offlineAlert" class="weui_dialog_confirm" style="display: none;">
            <div class="weui_mask"></div>
            <div class="weui_dialog">
                <div class="weui_dialog_hd">
                    <strong class="weui_dialog_title">确定是否删除这<span id="selected_num">0</span>门课程？</strong>
                </div>
                <div class="weui_dialog_bd"></div>
                <div class="weui_dialog_ft">
                    <a onclick="cleanCancel()" href="#" class="weui_btn_dialog default">取消</a>
                    <a onclick="cleanConfirm()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
                </div>
            </div>
        </div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript">
		var page = 1;
		var rows = 10;
		var dropRefreshCount = 0;
		var courseDatas = new Array();
		var oneWeek = 7 * 24 * 60 * 60 * 1000;
		var firstLoad = true;
		var isEdit = false;//是否是编辑状态
		var selectedCourses = new Array();
		var selectedCoursesName = new Array();
		var isAllSelect = false;//是否全选
		apiready = function(){
		    loadNewData();
			setRefreshHeader();
			setPullUpRefresh();
			setupNotifi();
			sendBuriedNotifi(0, '已选课程列表', '078');
			
		}
		function sendBuriedNotifi(busionessid, pagetype, pagetypeid) {
		    var cidArr=new Array();
		  	for (var i = 0; i < courseDatas.length; i++) {
		        cidArr[i]=courseDatas[i].cid
		    }
			var userinfo = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				uname : $api.getStorage('cfnetppusername'),
				cid :cidArr
			}
			
			var data = {
				busionessid : busionessid,
				pagetype : pagetype,
				pagetypeid : pagetypeid,
				sourceurl : api.pageParam.sourceurl,
				sourcetitle : api.pageParam.sourcetitle,
				accesspageurl : window.location.pathname,
				accesspagetitle : document.title,
				userinfo : userinfo
			}
			SendBehaviorTrajectoriesNotifi_Study(data);
		}
		function removeCourseClick(){
			selectedCourses = new Array();
			selectedCoursesName = new Array();
			$("[name='checkbox']").each(function(){
				if ($(this).is(":checked") == true){//选中的
					var index = $(this).attr('index');
					var courseData = courseDatas[parseInt(index)];
					var selectData = {
						cid : courseData.cid
					}
					
					selectedCoursesName.push(courseData.coursename);
					selectedCourses.push(selectData);
				}
			});
			var selectNum = selectedCourses.length;
			if (selectNum == 0) {
				api.toast({
				    msg: '请选择要删除的课程'
				});
				return;
			}
			$('#selected_num').text(selectNum);
			$('#offlineAlert').show();
		}
		//取消
		function cleanCancel(){
			$('#offlineAlert').hide();
		}
		//确认删除
		function cleanConfirm(){
			$('#offlineAlert').hide();
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				cid : selectedCourses,
				message:selectedCoursesName.toString(),
			};
			cfnetppPOST(url_removeCourse, param, false, function(data, status){
				
				SendBusinessOperationsLogNotifi('已选课程列表页', '078', param, param, '', data, '删除课程接口', '078-01')
				if (status == 'success') {
					if (data.code == 200) {
						api.toast({
						    msg: '删除成功'
						});
//						selectedCoursesName= [];
						clearCourseSelectStatus();
					    isEdit = false;
					    $(".course-cell").addClass("hide-checkbox");
					    $(".bottom-div").hide();
					    $(".blank-div").hide();
					    api.sendEvent({
					        name: 'showEditBtnNotifi'
					    });
					   
						loadNewData();
					}else{
						api.toast({
						    msg: '删除失败，请重试'
						});
					}
				}else{
					api.toast({
					    msg: '删除失败，请重试'
					});
				}
			});
		}
		function setupCheckboxClick(){
			$('.course-checkbox').unbind('click');
			$('.course-checkbox').on('click', function(){
				if ($(this).is(":checked") == false) {
					$("#all_select_input").removeAttr("checked");
					isAllSelect = false;
				}
			});
		}
		//清空选中状态
		function clearCourseSelectStatus(){
			$("[name='checkbox']").removeAttr("checked");
			$("#all_select_input").removeAttr("checked");//清空时，使用type连全选一起清空
			selectedCourses = new Array();
			isAllSelect = false;
		}
		function allSelect(){
			if (isAllSelect == true) {
				clearCourseSelectStatus();
			}else{
				isAllSelect = true;
				$("[name='checkbox']").prop('checked', 'true');
			}
		}
		function setupNotifi(){
			api.addEventListener({
			    name: 'editCourseNotifi'
			}, function(ret, err) {
			    isEdit = true;
			    $(".course-cell").removeClass("hide-checkbox");
			    $(".bottom-div").show();
			    $(".blank-div").show();
			});
			api.addEventListener({
			    name: 'clearCourseSelectStatusNotifi'
			}, function(ret, err) {
			    clearCourseSelectStatus();
			    isEdit = false;
			    $(".course-cell").addClass("hide-checkbox");
			    $(".bottom-div").hide();
			    $(".blank-div").hide();
			    $('#offlineAlert').hide();
			});
			api.addEventListener({
			    name: 'refreshCourseListNotifi'
			}, function(ret, err) {
			    loadNewData();
			});
		}
		function loadNewData() {
			page = 1;
			loadData();
		}
		function loadMoreData() {
			page++;
			loadData();
		}
		//下拉刷新
		function setRefreshHeader() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				loadNewData();
			});
		}
		// 上拉加载
		function setPullUpRefresh() {
			api.addEventListener({
				name : 'scrolltobottom'
			}, function(ret, err) {
				if (dropRefreshCount >= rows) {
					loadMoreData();
				}
			});
		}
		function loadData(){
			if (isEdit == true) {
				api.refreshHeaderLoadDone();
				api.hideProgress();
				return;
			}
			if (firstLoad == true) {
				api.showProgress({
				    style: 'default',
				    animationType: 'fade',
				    title: '加载中...',
				    text: '',
				    modal: false
				});
				firstLoad = false;
			}
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				page : page,
				rows : rows
			};
			
			cfnetppPOST(url_selectedCourseList, param, true, function(data, status) {
				api.refreshHeaderLoadDone();
				api.hideProgress();
				if (status == 'success') {
					if (data.status == true) {
						if (page == 1) {
							courseDatas = new Array();
						}
						var courseList = data.data;
						multiplePicturesCache({
							picArr : courseList,
							picKey : 'coverimages'
						}, function(imageArr){
							courseList = imageArr;
							if (courseList != null && courseList.constructor == Array && courseList.length > 0) {
								var currentIndex = courseDatas.length;
								dropRefreshCount = courseList.length;//设置当前下拉数
								courseDatas = courseDatas.concat(courseList);
								
								
								 api.sendEvent({//是winowtitile层获取到数据
					                name: 'WindowGETDataNotifi',
					                extra: {
									    data : courseDatas
									}
					             });
								
								var courseHtmlString = new String();
								for (var i = currentIndex; i < courseDatas.length; i++) {
									var courseData = courseDatas[i];
									courseHtmlString += courseHtmlWithData(courseData, i);
								}
								if (page == 1) {
									$('#tesacherTableView').html(courseHtmlString);
									api.sendEvent({//显示编辑按钮
									    name: 'setupEditShowOrHideNotifi',
									    extra: {
									    	editStatus : 1
									    }
									});
								}else{
									$('#tesacherTableView').append(courseHtmlString);
								}
								addCellClick();
								$('#noData').hide();
								$('#noNet').hide();
							}else{
								if (page == 1) {
									api.sendEvent({//隐藏编辑按钮
									    name: 'setupEditShowOrHideNotifi',
									    extra: {
									    	editStatus : 0
									    }
									});
									$('#tesacherTableView').html('');
									$('#noData').show();
									$('#noNet').hide();
								}
							}
						});
					} else {
						if (page == 1) {
							api.sendEvent({//隐藏编辑按钮
							    name: 'setupEditShowOrHideNotifi',
							    extra: {
							    	editStatus : 0
							    }
							});
							$('#tesacherTableView').html('');
							$('#noData').show();
							$('#noNet').hide();
						}else{
							// api.toast({
							// 	msg : '获取数据失败'
							// });
						}
					}
				} else {
					if (page == 1) {
						api.sendEvent({//隐藏编辑按钮
						    name: 'setupEditShowOrHideNotifi',
						    extra: {
						    	editStatus : 0
						    }
						});
						$('#tesacherTableView').html('');
						$('#noData').hide();
						$('#noNet').show();
					}else{
						api.toast({
							msg : '网络异常'
						});
					}
				}
			});
		}
		//添加点击事件
		function addCellClick(){
			setupCheckboxClick();
			$('.mui-table-view-cell').unbind('click');
			$('.mui-table-view-cell').click(function(){
				if (isEdit == true) {//如果是编辑状态则不作任何操作
					return;
				}
				var index = $(this).attr('index');
				var data = courseDatas[parseInt(index)];
				data["courseid"] = data.cid;
				data["planid"] = "0";
				data["userType"] = "student";
				openMooc(data);
			});
//			sendBuriedNotifi(1, '已选课程列表', '078');
		}
		
		//打开mooc课程
		function openMooc(data){
		  	sendBuriedNotifi(1, '已选课程列表', '078');
		   	data["sourceurl"]=window.location.pathname;
			data["sourcetitle"]=document.title;
			data["course_name"]=data.coursename;
			data["opentype"]='courseCenter';
			api.openWin({useWKWebView:true,
			    name: 'Teacher_StudyCourseInfo',
			    url: '../Teacher_Teach/Teacher_StudyCourseInfo.html',
			    pageParam: data
			});
		}
		//时间标签
		function timeTitleWithEndTime(endTime){
			var timeTitleHtml = '';
			var etime = parseInt(endTime) * 1000;//结束时间
			var nowTime = Date.parse(new Date());
			// alert("结束时间"+etime+'\n当前时间'+nowTime);
			if (etime <= nowTime) {
				timeTitleHtml = '<p class="course-status-tag">已结束</p>';
			}else{
				var tmpTime = etime - nowTime;
				if (tmpTime <= oneWeek) {
					var timeDate = new Date(etime);
					var timeMonth = timeDate.getMonth() + 1;
					var timeDay = timeDate.getDate();
					var timeTitle = timeMonth + '-' + timeDay + '到期';
					timeTitleHtml = '<p class="course-status-tag">' + timeTitle + '</p>';
				}
			}
			return timeTitleHtml;
		}
		function courseHtmlWithData(data, index){
			return '<li id="'+data.cid+'" index="' + index + '" class="mui-table-view-cell mui-checkbox mui-media mui-left course-cell hide-checkbox">'+
				'<input index="' + index + '" name="checkbox" type="checkbox" class="course-checkbox">'+
				'<a href="javascript:;">'+
					// '<p class="course-status-tag">已结束</p>'+
					'<img class="mui-media-object mui-pull-left course-img" src="' + data.coverimages + '"/>'+
					'<div class="mui-media-body top-content">'+
						'<p class="course_title">' + data.coursename + '</p>'+
					'</div>'+
					'<div class="mui-media-body bottom-content">'+
						'<div class="top-p">'+
							'<p class="mui-ellipsis subtitle">'+
								'<span class="left-span">'+
									data.speaker+
								'</span>'+
							'</p>'+
						'</div>'+
						'<div class="bottom-p">'+
							'<p class="mui-ellipsis subtitle">'+
								'<span class="left-span"><img class="tag-img" src="../../image/icon_course_look.png">'+numNullStr(data.viewcount)+'人</span>'+
								'<span class="info-span"><img class="tag-img" src="../../image/icon_course_comment.png">'+numNullStr(data.commentcount)+'条</span>'+
							'</p>'+
						'</div>'+
					'</div>'+
				'</a>'+
			'</li>';
		}
		function minuteWithSecond(second){
			// return (parseInt(second) / 60).toFixed(0);//该方法会四舍五入
			return parseInt(parseInt(second) / 60);
		}
		function imageUrlWithStr(string){
			if (string.indexOf("http://") == -1) {
				if (string.indexOf("learn/") == -1) {
					return 'http://bos.cfnet.org.cn/' + string;
				}else{
					return 'http://cfnet.org.cn/data/uploads/' + string;
				}
			}else{
				return string;
			}
		}
		function refreshData(){
			firstLoad = true;
			loadNewData();
		}
		function numNullStr(str){
			if (str == null || str == '' || str == undefined) {
				return 0;
			}
			return str;
		}
		function onSelectCourseClick(){
		    sendBuriedNotifi(1, '已选课程列表', '078');
			api.openWin({useWKWebView:true,
			    name: 'CourseCenter_SelectCourseListWin',
			    url: 'CourseCenter_SelectCourseListWin.html',
			    pageParam:{
				    sourceurl : api.pageParam.sourceurl,
				    sourcetitle : api.pageParam.sourcetitle
			    }
			});
		}
	</script>
</html>